<template>
	<view>
		<!-- <web-view :src="hrefUrl"></web-view> -->
		<!-- 第一部分 -->
		<view style="padding: 40upx;" class="border-top">
			<text class="detail-title">刚刚，从本周开盘的楼盘现场传来几组图片，请查看！</text>
			<view class="detail-sub-title">
				<text>中房地产综合整理 01/19 10:02</text>
				<text>*本页面涉及面积，如无特殊说明，均指建筑面积</text>
			</view>
			<view class="main-content" style="font-size: 32upx;">
				<text style="line-height: 60upx;">近期在关注中海寰宇时代、诺德逸府、城市之光·东望、万科·雲庐、北京华发·中央公园？想知道中海寰宇时代、诺德逸府、城市之光·东望、万科·雲庐、北京华发·中央公园怎么样？有哪些新动态？小编帮您整理了置业顾问传来的现场谍照，快点来看看吧！</text>
			</view>
			<view class="like-area">
				<view class="circle">
					<text class="iconfont icon-dianzan1"></text>
					<text>0</text>
				</view>
			</view>
		</view>
		<sun-divider></sun-divider>
		<!-- 猜你喜欢 -->
		<view class="estate-intro-part px-4" style="width: 670upx;padding-bottom: 14upx;">
			<view class="apart-chapter">
				<text class="module-title">猜你喜欢</text>
			</view>
			<view>
				<view v-for="(item,index) in customLikes" :key="index" @click="skipToEstateDetailPage(item.id)" style="padding: 40upx 0;" class="d-flex flex-column j-sb border-bottom">
					<view class="d-flex j-sb">
						<view style="margin-right: 34upx;">
							<image :src="item.thumb?item.thumb:defaultLikeSrc" style="width: 242upx;height: 190upx;border-radius: 10upx;" mode=""></image>
						</view>
						<view class="d-flex flex-column j-sb" style="width: 394upx;">
							<text style="font-size: 32upx;font-weight: 600;line-height: 44upx;">{{item.projectName}}</text>
							<text style="color: #F85D5A;font-size: 28upx;">{{item.housePrice}}元/㎡</text>
							<text class="single-row-over">{{item.houseAddress}}/{{item.area}}</text>
							<view class="d-flex a-center" style="flex-wrap: wrap;">
								<uni-tag :text="item.salesState" style="margin-right: 6upx;" size="small" type="success"></uni-tag>
								<uni-tag v-for="(item1,index1) in item.tags.split(' ')" style="margin-right: 4upx;margin-bottom: 4upx;" :key="index1" :text="item1" size="small"></uni-tag>
							</view>
						</view>
					</view>
					<view class="d-flex a-center" style="font-size: 24upx;">
						<image src="../../../static/images/estate/light.png" style="width: 26upx;height: 26upx;" mode=""></image>
						<text style="margin-left: 20upx;font-weight: bold;">楼盘亮点</text>
						<text style="margin-left: 20upx;">{{item.lightSpot}}</text>
					</view>
				</view>
			</view>
			<view class="more-info-module">
				<image src="../../../static/images/estate/moreHouse.png" style="width: 26upx;height: 26upx;" mode=""></image>
				<text style="margin-left: 10upx;">更多房源</text>
			</view>
		</view>
		<view class="d-flex j-center" style="height: 68upx;align-items: flex-end;">
			<view class="tangle-area"></view>
		</view>
	</view>
</template>

<script>
	import api from '@/common/lib/request.js';
	import sunDivider from '@/components/common/sun-divider.vue';
	import apartSlide from '@/components/module/apart-slide.vue';
	import uniSwiperDot from "@/components/uni-ui/uni-swiper-dot/uni-swiper-dot.vue"; 
	import uniTag from "@/components/uni-ui/uni-tag/uni-tag.vue";
	import uniRate from '@/components/uni-ui/uni-rate/uni-rate.vue';
	export default {
		data() {
			return {
				srcInactive: '../../../static/images/estate/concern.png',
				srcActive: '../../../static/images/estate/concern-active.png',
				defaultLikeSrc: '../../../static/images/shuijiao.jpg',  //猜你喜欢的默认配图
				customLikes: [],  //猜你喜欢
				contentId:''
			}
		},
		components:{
			sunDivider,
			apartSlide,
			uniSwiperDot,
			uniTag,
			uniRate
		},
		watch:{
			defaultModel(newVal){
				
			}
		},
		onLoad(options) {
			if (options.contentId) {
				this.contentId = options.contentId;
				this.getCustomLikes()
			}
		},
		methods: {
			getCustomLikes(){
				let _this = this;
				let locationInfo = uni.getStorageSync('location');
				api.request({
						url: '/lpxx/recommend',
						data: {
							contentId: _this.contentId,
							siteId: JSON.parse(locationInfo).id
						}
					}).then(response => {
						console.log(response)
						this.customLikes = response;
					}).catch(err => {
						console.log(err);
					});
			},
			skipToEstateDetailPage(id){
				uni.navigateTo({
					url: '/pages/estate/estateDetail/estateDetail?contentId=' + id
				})
			}	
		}
	}
</script>

<style scoped>
	.detail-title{
		font-size: 46upx;
		font-weight: bold;
		line-height: 64upx;
	}
	.detail-sub-title{
		display: flex;
		flex-direction: column;
		font-size: 24upx;
		color: #999999;
		height: 88upx;
		margin: 10upx 0 40upx;
	}
	.like-area{
		padding: 80upx 0 106upx;
		display: flex;
		justify-content: center;
	}
	.circle{
		width: 112upx;
		height: 112upx;
		border-radius: 56upx;
		border: 1px solid #E8E8E8;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.tangle-area{
		height: 10upx;
		width: 268upx;
		border-radius: 5upx;
		background-color: #000000;
		margin-bottom: 16upx;
	}
	.estate-title-part {
		width: 710upx;
		padding: 0 20upx;
	}
	
	.title-top{
		font-family: PingFang-SC-Bold;
		font-size: 48upx;
		color: #333333;
		letter-spacing: 0;
		font-weight: bold;
	}
	.calc-btn{
		display: flex;
		width: 150upx;
		height: 50upx;
		align-items: center;
		justify-content: center;
		border-radius: 25upx;
		text-align: center;
		border: 1px solid #E53636;
		color: #E53636 ;
		font-size: 24upx;
	}
	.more-info-module{
		display: flex;
		justify-content: center;
		align-items: center;
		background: #F5FAFF;
		border-radius: 8upx;
		height: 74upx;
		font-family: PingFangSC-Regular;
		font-size: 28upx;
		color: #005BAD;
		letter-spacing: 0;
		margin: 20upx 0;
	}
	.title-basic-info{
		display: flex;
		font-size: 28upx;
		color: #878787;
		height: 60upx;
		line-height: 60upx;
	}
	.estate-title{
		font-size: 32upx;
		color: #333333;
		line-height: 42upx;
	}
	.label-wrapper{
		align-items: center;
		justify-content: space-around;
		font-size: 32upx;
		height: 84upx;
		text-align: center;
	}
	.label-item.active{
		height: 40px;
		border-bottom: 2px solid #005BAD;
		display: flex;
		align-items: center;
	}
	.label-wrapper .active{
		color: #005BAD;
	}
	.tag-item{
		margin-right: 6upx;
		color: #9B9B9B;
	}
	.bottom-part{
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 9999;
		padding: 0 40upx;
		height: 90upx;
		background: #FFFFFF;
	}
	.apart-chapter{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20upx;
		margin-top: 40upx;
	}
    .advance-sale{
		
	}
	.tags {
		font-size: 16upx;
		border-radius: 2upx;
		height: 26upx;
		line-height: 26upx;
		text-align: center;
	}
	.custom-tag{
		background: #FFFFFF;
		border: 2upx solid #C9C9C9;
		border-radius: 2upx;
		font-size: 24upx;
		color: #333333;
		text-align: center;
		line-height: 38upx;
		padding: 0 10upx;
		height: 38upx;
		margin-right: 10upx;
	}

	.tag-1 {
		width: 50upx;
		background: rgba(242, 156, 159, .24);
		margin-right: 12upx;
	}

	.tag-2 {
		width: 96upx;
		background: rgba(136, 171, 218, .24);
	}

	.basic-info {
		display: flex;
		align-items: center;
		height: 80upx;
		border-bottom: 1upx solid #DDDDDD;
		font-size: 28upx;
		color: #999999;
	}

	.basic-info .iconfont {
		margin-right: 10upx;
	}
	.module-title{
		font-size: 36upx;
		color: #2A2A2A;
		font-weight: bold;
	}
	.detail-module{
		display: flex;
		flex-direction: column;
		color: #999999;
		font-size: 28upx;
	}
	.active{
		color: #005BAD!important;
	}
	.active-concern{
		color: #F85D5A!important;
	}
	.white-space{
		height: 90upx;
		width: 100%;
	}
	.concern-file{
		position: absolute;
		top: 110upx;
		right: 38upx;
		width: 40upx;
		height: 38upx;
	}
</style>

